import React from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import icon_tab_publish from '../../../assets/icon_tab_publish.png';
import { launchImageLibrary, ImagePickerResponse } from 'react-native-image-picker';

export default function TabItem({ state, descriptors, navigation }: any) {
  const { routes, index } = state;
  const changeTabbar = (route: { name: any; }) => {
    navigation.navigate(route.name)
  }
  const onPublish = () => {
    console.log('点击发布');
    launchImageLibrary(
      // 参数1  指定类型  
      {
        mediaType: 'photo',
        quality: 1,
        includeBase64: true
      },
      // 参数2 回调函数
      (res: ImagePickerResponse) => {
        const { assets } = res;
        if (!assets?.length) {
          console.log('选择图片失败');
          return;
        }
        const {
          uri, width, height, fileName, fileSize, type
        } = assets[0];
        console.log(`uri=${uri}, width=${width}, height=${height}`);
        console.log(`fileName=${fileName}, fileSize=${fileSize}, type=${type}`);
      }
    )
  }
  return (
    <View style={styles.tabbarLayout}>
      {
        routes.map((route: any, i: number) => {
          const { options } = descriptors[route.key] // 这里取到的就是 配置的路由项
          const label = options.title; // 拿到title
          const isFocused = index === i // 判断选中不选中的样式
          // 对于发布按钮单独书写
          if (i === 2) {
            return (
              <TouchableOpacity
                key={label}
                style={styles.pushlishIcon}
                onPress={onPublish}
                activeOpacity={0.5}
              >
                <Image style={styles.icon_tab_publish} source={icon_tab_publish} />
              </TouchableOpacity>
            )
          }
          return (
            <TouchableOpacity
              style={styles.tabbarItem}
              key={label}
              onPress={() => { changeTabbar(route) }}
              activeOpacity={0.7}
            >
              <Text style={[styles.tabbarItemTxt, isFocused && styles.txtFocus]} >{label} </Text>
            </TouchableOpacity>
          )
        })
      }
    </View>
  )
}
const styles = StyleSheet.create({
  tabbarLayout: {
    width: '100%',
    height: 54,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: "#fff"
  },
  tabbarItem: {
    width: '100%',
    flex: 1
  },
  tabbarItemTxt: {
    textAlign: 'center',
    fontSize: 14,
    color: '#999'
  },
  txtFocus: {
    color: '#333',
    fontWeight: '500',
    fontSize: 16
  },
  pushlishIcon: {
    height: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon_tab_publish: {
    width: 58,
    height: 42,
    resizeMode: 'contain',
  },
})
